\
<template>
    <div class="w-100" style="height: 100%">
      <div
        :id="echartsId"
        class="w-100"
        style="height: 100%; position: relative"
      ></div>
    </div>
  </template>
  
  <script setup lang="ts">
  import * as echarts from "echarts";
  const props = defineProps({
    echartsData: {
      type: Array,
      default: () => [],
    },
    echartsId:{
        type: String,
      default:'', 
    },
    derection:{
        type: String,
      default:'', 
    },
    barWidth:{
      type: String,
      default:'60%', 
    },
    labelShow:{
      type: Boolean,
      default:false,
    },
    labelRotate:{
      type: Boolean,
      default:false,
    },
    rotateAngle:{
      type: Number,
      default:45,
    },
    unit:{
        type: String,
      default:'个', 
    },
    yName:{
      type:String,
      default:''
    }

  });
  let option_h:any = {
    grid: {
    containLabel: true // 确保标签被完整显示
  },

  xAxis: {
    type: "value", // 将值轴配置到X轴
    axisLabel: {
      formatter: "{value}"+props.unit,
      fontSize: 20,
      fontFamily: "OPPOSans-Regular",
    },
    nameTextStyle: {
      color: "#DEDEDE",
      fontSize: 20,
      padding: 10,
    },
    splitLine: {
      show: true,
      lineStyle: {
        opacity: 0.2,
      },
    },
  },
  yAxis: {
    type: "category", // 将类别轴配置到Y轴
    data: props.echartsData.map((item: any) => item.name),
    axisLabel: {
      fontSize: 20,
      fontFamily: "OPPOSans-Regular",
      color:'#fff'
      
    },
    splitLine: { // 配置分割线
            show: true,
            lineStyle: {
                color: 'rgba(92, 225, 255, 0.5)', // 蓝色分割线
                type: 'solid' // 实线
            }
        },
  },
  series: [
    {
      type: "bar",
      label: {
            show: props.labelShow, // 开启显示
            position: 'right', // 在顶端显示
            color: 'white',
            // 可以添加更多样式配置，如字体大小、颜色等
        },
      data: props.echartsData.map((item: any) => item.value), // 示例数值数据
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: "rgba(3, 230, 254, 1)" },
          { offset: 0.01, color: "rgba(3, 230, 254, 0)" },
          { offset: 1, color: "rgba(3, 230, 254, 1)" },
        ]),
      },
      barWidth: props.barWidth, // 调整柱状图的宽度
    },
  ],
};
let option_v:any = {
  grid: {
    containLabel: true, // 确保标签被完整显示
    left: "3%",
    right: "4%",
    bottom: "5%",
    top: "14%",
  },
  yAxis: {
    name:props.yName,
    type: "value",
    axisLabel: {
      formatter: "{value}"+props.unit,
      fontSize: 20,
      fontFamily: "OPPOSans-Regular",
    },
    nameTextStyle: {
            color: "#8994A3",
            fontSize: 20,
          },
    splitLine: { // 配置分割线
            show: true,
            lineStyle: {
                color: 'rgba(92, 225, 255, 0.5)', // 蓝色分割线
                type: 'solid' // 实线
            }
        },
  },
  xAxis: {
    type: "category",
    data: props.echartsData.map((item: any) => item.name),
    axisLabel: {
      fontSize: 20,
      fontFamily: "OPPOSans-Regular",
      formatter: function (value: string) {
        return value.length > 4 ? value.substring(0, 4) + '\n' + value.substring(4) : value;
      }
    },
  },
  series: [
    {
      type: "bar",
      label: {
            show: props.labelShow, // 开启显示
            position: 'top', // 在顶端显示
            // 可以添加更多样式配置，如字体大小、颜色等
        },
      data: props.echartsData.map((item: any) => item.value), // 示例数值数据
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(3, 230, 254, 1)", // 顶部颜色
          },
          {
            offset: 0.01,
            color: "rgba(3, 230, 254, 0)", // 接近底部的颜色
          },
          {
            offset: 1,
            color: "rgba(3, 230, 254, 1)", // 底部颜色，透明
          },
        ]),
      },
      barWidth: props.barWidth,// 调整柱状图的宽度
    },
  ],
};
let myChart:any=null
  onMounted(() => {
     myChart = echarts.init(
      document.getElementById(props.echartsId) as HTMLElement
    );
    if(props.labelRotate){
      option_h.yAxis.axisLabel.rotate=props.rotateAngle
      option_h.yAxis.axisLabel.interval=0
      option_v.xAxis.axisLabel.rotate=props.rotateAngle
      option_v.yAxis.axisLabel.interval=0

    }
    props.derection==='v'?myChart.setOption(option_h):myChart.setOption(option_v)
  });
  onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose();
  }
});
  </script>
  
  <style></style>
  